<template>
    <div class="container">
        <SearchForm
            @reset="reset"
            @search="search"
            ref="search"
            :queryParams="queryParams"
            labelWidth="100px"
        >
            <FromItem v-for="item in searchs" :FormItem="item"></FromItem>
        </SearchForm>

        <div class="card-wrap card-padding">
            <div class="table-title-wrap justify-end"></div>
            <div class="tableBox">
                <table-page
                    :loading="loading"
                    :dataList="dataList"
                    :total="total"
                    :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize"
                    :border="true"
                    @setSizeCurrent="getList"
                >
                    <!-- 操作插槽 -->
                    <template slot="tableColAc">
                        <el-table-column
                            label="操作"
                            align="center"
                            width="120"
                        >
                            <template slot-scope="scope">
                                <div class="handle">
                                    <el-button
                                        size="mini"
                                        type="text"
                                        @click="
                                            toPage({
                                                path: '/finance/collectDetail',
                                                query: {
                                                    id: scope.row.proceedsId,
                                                },
                                            })
                                        "
                                        v-hasPermi="[
                                            'finance:manage:collect:list:look',
                                        ]"
                                        >原车续签</el-button
                                    >
                                    <el-button
                                        size="mini"
                                        type="text"
                                        v-if="scope.row.waitAmount == 0"
                                        @click="
                                            toPage({ path: '/finance/invoice' })
                                        "
                                        v-hasPermi="[
                                            'finance:manage:collect:list:invoice',
                                        ]"
                                    >
                                        新车续签
                                    </el-button>

                                    <el-button
                                        size="mini"
                                        type="text"
                                        v-if="scope.row.waitAmount == 0"
                                        @click="
                                            toPage({ path: '/finance/invoice' })
                                        "
                                        v-hasPermi="[
                                            'finance:manage:collect:list:invoice',
                                        ]"
                                    >
                                        合同变更
                                    </el-button>
                                    <el-button
                                        size="mini"
                                        type="text"
                                        v-if="scope.row.waitAmount == 0"
                                        @click="
                                            toPage({ path: '/finance/invoice' })
                                        "
                                        v-hasPermi="[
                                            'finance:manage:collect:list:invoice',
                                        ]"
                                    >
                                        编辑
                                    </el-button>
                                    <el-button
                                        size="mini"
                                        type="text"
                                        v-if="scope.row.waitAmount == 0"
                                        @click="
                                            toPage({ path: '/finance/invoice' })
                                        "
                                        v-hasPermi="[
                                            'finance:manage:collect:list:invoice',
                                        ]"
                                    >
                                        订单详情
                                    </el-button>
                                    <el-button
                                        size="mini"
                                        type="text"
                                        v-if="scope.row.waitAmount == 0"
                                        @click="
                                            toPage({ path: '/finance/invoice' })
                                        "
                                        v-hasPermi="[
                                            'finance:manage:collect:list:invoice',
                                        ]"
                                    >
                                        子订单管理
                                    </el-button>
                                </div>
                            </template>
                        </el-table-column>
                        <TableCloumn
                            v-for="(item, index) in tableCloumns"
                            :cellOptions="item"
                        ></TableCloumn>
                    </template>
                </table-page>
            </div>
        </div>
    </div>
</template>

<script>
import FormItems from "@/views/finance/manage/formItems/index.vue";
import FromItem from "@/views/finance/reimburs/formItem/index.vue";
import TableCloumn from "@/views/finance/manage/tableColumn/index.vue";
import * as app from "@/api/app.js";
export default {
    components: { TableCloumn, FormItems, FromItem },
    data() {
        return {
            total: 0,
            loading: false,
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
        };
    },
    create() {
        this.getList();
    },
    computed: {
        searchs() {
            return [
                { label: "订单编号:", type: "input", prop: "a" },
                { label: "额度申请编号:", type: "input", prop: "a" },
                {
                    label: "订单状态:",
                    type: "select",
                    selectList: [],
                    prop: "a",
                },
                { label: "出租方:", type: "input", prop: "a" },
                { label: "承租方:", type: "input", prop: "a" },
                {
                    label: "订单类型:",
                    type: "select",
                    selectList: [],
                    prop: "a",
                },
            ];
        },
        tableCloumns() {
            return [
                {
                    label: "订单状态",
                    prop: "a",
                },
                {
                    label: "订单审批状态",
                    prop: "a",
                },
                {
                    label: "额度申请编号",
                    prop: "a",
                },
                {
                    label: "订单编号",
                    prop: "a",
                },
                {
                    label: "订单类型",
                    prop: "a",
                },
                {
                    label: "出租方",
                    prop: "a",
                },
                {
                    label: "承租方",
                    prop: "a",
                },
                {
                    label: "交车总数量",
                    prop: "a",
                },
                {
                    label: "已交车数量",
                    prop: "a",
                },
                {
                    label: "未交车数量",
                    prop: "a",
                },
            ];
        },
    },
    methods: {
        toPage(route) {
            this.$router.push(route);
        },
        search() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        reset() {
            this.$refs.search.form_resetFields();
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
            };
            this.getList();
        },
        getList() {
            this.loading = true;
            List(this.queryParams)
                .then((res) => {
                    if (res.code == 200) {
                        this.dataList = res.rows;
                        this.total = res.total;
                    }
                })
                .catch(() => {})
                .finally(() => {
                    this.loading = false;
                });
        },
    },
};
</script>

<style scoped lang="scss">
.container {
    box-sizing: border-box;
    margin: 15px;
}

.tableBox {
    margin-top: 10px;
    background-color: #fff;
}
.searchbtns {
    padding: 20px 15px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
}
.search_condition {
    margin-top: 15px;
    padding: 15px 20px 0;
    background-color: #fff;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    .item {
        font-size: 14px;
        padding: 10px 15px;
        border: 1px solid #ccc;
        border-radius: 7px;
        cursor: pointer;
        background-color: #fff;
        min-width: 74px;
        text-align: center;
    }
    .active {
        border-color: #339dff;
        color: #339dff;
    }
}
.search_handle {
    margin-top: 15px;
}
.handle {
    display: flex;
    justify-content: space-around;
}
.dialog_title {
    .main {
        font-weight: 500;
        font-size: 16px;
        color: #333;
        padding-bottom: 5px;
    }
    .tip {
        color: #eb7785;
        font-size: 12px;
    }
}
.tips {
    margin: 15px;
    font-size: 12px;
    color: red;
    .tips_title {
        font-size: 14px;
    }
}
// ::v-deep div:empty::after {
//     content: "-";
// }

.dialogContent {
    margin: 15px 20px;
}
::v-deep .el-input-number {
    width: 220px;
    input {
        width: 100%;
        text-align: left;
        padding: 0 15px !important;
    }
    .el-input-number__decrease {
        display: none;
    }
    .el-input-number__increase {
        display: none;
    }
}
.sign_normal {
    color: #1d4ed8;
}
</style>
